<template>
  <!-- 搜索页的每个拍品 -->
  <div
    class="product"
    @click="$router.push(`/auction_details/${product.pid}`)"
  >
    <div>
      <img v-lazy="`/${product.pic}`" :src="`/${product.pic}`" />
    </div>
    <div>
      <div class="title">{{ product.pro_id }}</div>
      <div class="name">{{ product.title }}</div>
      <div class="money">RMB：{{ product.turnover }}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["product"],
};
</script>

<style lang="scss" scoped>
.product {
  box-sizing: border-box;
  margin-bottom: 0.615em;
  border-bottom: 1px solid #f5f5f5;
  display: flex;
  > div {
    &:nth-child(1) {
      width: 8em;
      img {
        max-width: 100%;
        height: 6.63em;
        padding: 0 1.06em;
      }
    }
    &:nth-child(2) {
      font-size: 0.9em;
      padding: 0.615em 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .title {
        color: #acacac;
      }
      .money {
        color: #acacac;
        font-size: 0.9em;
      }
    }
  }
}
</style>